<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="5"><div class="grid-content ">

            </div></el-col>
            <el-col :span="14">
                <div class="grid-content">
                <div class="chinaMap">
                    <div ref="MapMountNode" style="width:1000px;height:600px"></div>
                </div>
            </div>
            </el-col>
            <el-col :span="5"><div class="grid-content"></div></el-col>
        </el-row>
    </div>

</template>

<script>
    export default {
        name: "ChinaCharts",
        data(){
            return{
                chartsData:[],
            }
        },
        created(){
            this.queryDataView = false
            this.axios.get("http://127.0.0.1:8088/chinaCharts")
                .then(res =>{
                    console.log("res = "+JSON.stringify(res))
                    this.chartsData = res.data;
                    this.$nextTick(() => {
                        // 数据纯属虚构
                        var data = this.chartsData;
                        var yData = [];

                        data.sort(function(o1, o2) {
                            if (isNaN(o1.value) || o1.value == null) return -1;
                            if (isNaN(o2.value) || o2.value == null) return 1;
                            return o1.value - o2.value;
                        });

                        for (var i = 0; i < data.length; i++) {
                            yData.push(data[i].name);
                        }
                        let option = {
                            title: {
                                text: "疫情地图展示",
                                textStyle: {
                                    fontSize: 20
                                },
                                x: "center"
                            },
                            tooltip: {
                                show: true,
                                formatter: function(params) {
                                    return params.name + "：" +"累计确诊:"+params.data["value"];
                                }
                            },
                            visualMap: {
                                type: "continuous",
                                text: ["", ""],
                                showLabel: true,
                                seriesIndex: [0],
                                min: 0,
                                max: 2000,
                                inRange: {
                                    color: ["#FFEBCD", "#FFA07A", "#FF6347", "#FF0000", "#B22222"]
                                },
                                textStyle: {
                                    color: "#000"
                                },
                                bottom: 30,
                                left: "left"
                            },
                            grid: {
                                right: 40,
                                top: 80,
                                bottom: 30,
                                width: "20%"
                            },
                            xAxis: {
                                type: "value",
                                scale: true,
                                position: "top",
                                splitNumber: 1,
                                boundaryGap: false,
                                splitLine: {
                                    show: false
                                },
                                axisLine: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    margin: 2,
                                    textStyle: {
                                        color: "#aaa"
                                    }
                                }
                            },
                            yAxis: {
                                type: "category",
                                nameGap: 16,
                                axisLine: {
                                    show: false,
                                    lineStyle: {
                                        color: "#ddd"
                                    }
                                },
                                axisTick: {
                                    show: false,
                                    lineStyle: {
                                        color: "#ddd"
                                    }
                                },
                                axisLabel: {
                                    interval: 0,
                                    textStyle: {
                                        color: "#999"
                                    }
                                },
                                data: yData
                            },
                            geo: {
                                roam: true,
                                map: "china",
                                left: "left",
                                right: "300",
                                layoutSize: "80%",
                                label: {
                                    emphasis: {
                                        show: false
                                    }
                                },
                                itemStyle: {
                                    emphasis: {
                                        areaColor: "#fff464"
                                    }
                                },
                                regions: [
                                    {
                                        name: "南海诸岛",
                                        value: 0,
                                        itemStyle: {
                                            normal: {
                                                opacity: 0,
                                                label: {
                                                    show: false
                                                }
                                            }
                                        }
                                    }
                                ]
                            },
                            series: [
                                {
                                    name: "mapSer",
                                    type: "map",
                                    roam: false,
                                    geoIndex: 0,
                                    label: {
                                        show: false
                                    },
                                    data: data
                                },
                                {
                                    name: "barSer",
                                    type: "bar",
                                    roam: false,
                                    visualMap: false,
                                    zlevel: 2,
                                    barMaxWidth: 20,
                                    itemStyle: {
                                        normal: {
                                            color: "#40a9ed"
                                        },
                                        emphasis: {
                                            color: "#3596c0"
                                        }
                                    },
                                    label: {
                                        normal: {
                                            show: false,
                                            position: "right",
                                            offset: [0, 10]
                                        },
                                        emphasis: {
                                            show: true,
                                            position: "right",
                                            offset: [10, 0]
                                        }
                                    },
                                    data: data
                                }
                            ]
                        };
                        this.MapMountNode = this.$echarts.init(
                            this.$refs.MapMountNode
                        );
                        this.MapMountNode.setOption(option);
                        // on(window, 'resize', this.resize)
                    });
                })
                .catch(err =>{

                });

        },
    }
</script>

<style scoped>

</style>